<template>
  <div class="home">
    <el-input
      v-model="input"
      placeholder="请输入内容"
    ></el-input>
    <NavbarIndex></NavbarIndex>
    <el-carousel
      :interval="4000"
      type="card"
      height="200px"
    >
      <el-carousel-item>
        <img
          src="http://www.clfpyb.com/static/test/14.jpg"
          style="max-width: 100%"
        >
      </el-carousel-item>
      <el-carousel-item>
        <img
          src="http://www.clfpyb.com/static/test/14.jpg"
          style="max-width: 100%"
        >
      </el-carousel-item>
      <el-carousel-item>
        <img
          src="http://www.clfpyb.com/static/test/14.jpg"
          style="max-width: 100%"
        >
      </el-carousel-item>
    </el-carousel>
    <div style="display: flex;font-size:2vw;">
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
    </div>
    <div style="display: flex;font-size:2vw;">
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
      <div style="flex-grow: 1;">紧急救援</div>
    </div>
    <div>我们在行动</div>
    <el-card
      :body-style="{ padding: '0px' }"
      style="width:33.466666666vw;height:36.4vw;display:inline-block"
    >
      <img
        src="../assets/1.jpg"
        class="image"
        style="height:22.533333333vw"
      >
      <div style="padding: 5px;">
        <div>好吃的汉堡</div>
        <small>知识改变命运</small>
      </div>
    </el-card>
    <el-card
      :body-style="{ padding: '0px' }"
      style="width:33.466666666vw;height:36.4vw;display:inline-block"
    >
      <img
        src="../assets/1.jpg"
        class="image"
        style="height:22.533333333vw"
      >
      <div style="padding: 5px;">
        <div>好吃的汉堡</div>
        <small>知识改变命运</small>
      </div>
    </el-card>
    <div>项目进展</div>
    <div class="container">
      <div class="debriefingfirst">
        <img src="../assets/2.jpg">
        <div class="btn">查看更多</div>
      </div>
      <div class="debriefingfirst">
        <img src="../assets/2.jpg">
        <div class="btn">查看更多</div>
      </div>

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import NavbarIndex from '@/components/NavbarIndex.vue'

export default {
  name: 'home',
  components: {
    NavbarIndex
  },
  data () {
    return {
      activeName: 'second',
      input: ''
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style>
.container {
  width: 94.666666666vw;
  margin: auto;
}
.debriefingfirst {
  position: relative;
}
.debriefingfirst img {
  width: 100%;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.debriefingfirst .btn {
  width: 25.2vw;
  height: 7.866666666vw;
  -webkit-border-radius: 7.866666666vw;
  -moz-border-radius: 7.866666666vw;
  border-radius: 7.866666666vw;
  background-color: #80c0b2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #ffffff;
  position: absolute;
  bottom: 5.2vw;
  right: 2.4vw;
  font-size: 4vw;
}
</style>
